<template>
  <div class="pnl upload-list">
    <div class="item" v-for="(item, index) in uploadList" :key="index">
      <template v-if="item.status === 'finished'">
        <a v-if="item.imgUrl.indexOf('http') != -1" :href="item.imgUrl" target="_blank"><img :src="item.imgUrl + '_110w'"></a>
        <a v-else :href="preFixPath + item.imgUrl" target="_blank"><img :src="preFixPath + item.imgUrl + '_110w'"></a>
        <Icon class="btn-close" type="md-close-circle" @click.native="removeUploadItem"></Icon>
      </template>
      <template v-show="item.status !== 'finished'">
        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
      </template>
    </div>
    <Upload
      class="item"
      ref="upload"
      :show-upload-list="false"
      :on-success="onUploadSuccess"
      :accept="accept"
      :format="format"
      :headers="headers"
      :max-size="uploadMax"
      :on-format-error="onUploadFormatError"
      :on-exceeded-size="onUploadSizeError"
      type="drag"
      :action="url"
      v-show="uploadList.length < maxlength">
      <div>
        <Icon type="camera"></Icon>
      </div>
    </Upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
  getOriginData, 
  uploadImageUrl, 
  uploadFlashUrl, 
  uploadMediaUrl, 
  uploadFileUrl,
  preFixPath} from "@/util";

export default {
  props: {
    uploadList: {
      type: Array,
      default: []
    },
    maxlength: {
      type: Number,
      default: 1
    },
    upLoadType: {
      type: String,
      default: 'image'
    },
    itemData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      uploadImageUrl,
      preFixPath,
      uploadMax: SYSTEM_CONFIG.uploadMaxSize * 1024,
      headers: {}
    };
  },
  mounted() {
    let userToken = this.user.userToken
    if (userToken){
      this.headers['Authorization'] = 'Bearer ' + `${userToken}`;
    }
  },
  computed: {
    ...mapGetters(['user']),
    url() {
      let urlStr = ''
      switch (this.upLoadType) {
        case 'image':
          urlStr = this.uploadImageUrl
          break;
      }
      return urlStr
    },
    accept() {
      let acceptStr = ''
      switch (this.upLoadType) {
        case 'image':
          acceptStr = SYSTEM_CONFIG.uploadImageExtension.split(',').map(item => 'image/'+item).join(',');
          break;
      }
      return acceptStr
    },
    format() {
      let formatArr = ''
      switch (this.upLoadType) {
        case 'image':
          formatArr = SYSTEM_CONFIG.uploadImageExtensions
          break;
      }
      return formatArr
    }
  },
  methods: {
    removeUploadItem(i) {
      this.uploadList = []
      this.$refs.upload.fileList.splice(0, 1)
      this.$emit("uploadPic", this.uploadList, this.itemData)
    },
    onUploadSuccess(res, file) {
      if (res.code === 200) {
        file.url = res.data;
        let path = res.data.path;
        file.imgUrl = path;
        this.$Message.success("上传成功");
        this.uploadList.push(file);
      } else {
        this.$Notice.error({
          title: "上传失败",
          desc: res.message
        });
        this.$refs.upload.fileList.splice(this.$refs.upload.fileList.length - 1, 1);
      }
      this.$emit("uploadPic", this.uploadList, this.itemData);
    },
    onUploadFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
      });
      this.$emit("uploadPic", this.uploadList, this.itemData);
    },
    onUploadSizeError(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件 " + file.name + " 太大，不能超过 "+parseInt(this.uploadMax/1024)+"M。"
      });
      this.$emit("uploadPic", this.uploadList, this.itemData);
    }
  }
};
</script>
